<template>
	<div class="login">
		<el-alert v-if="!systemCanUse" title="该系统已失效!" type="warning" center show-icon>
		</el-alert>
		<el-alert v-else-if="!guestCanUse" title="企业登录暂未开放,请于9月21日以后进入使用!" type="warning" center show-icon>
		</el-alert>



		<!--悬浮小广告样式的提示信息-->
		<div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0" v-show="thedivShow"
			@mouseover="clearFdAd" @mouseout="starFdAd">
			<div style="cursor: pointer;text-align: right;font-size: 12px;color: #999999;" @click="thedivShow = false">
				<i class="el-icon-circle-close" style="font-size: 30px;"></i>
			</div>
			<div class="ad">
				<span class="ad-title">温馨提示</span>
				<span class="ad-content">
					<li>1、本系统10月3日24时起停止退工业务资料上传，10月4日至10月10日上传的录用资料仅作为工伤待遇支付依据，用人单位需在11日后登录“江苏人社网上办事服务大厅”或至线下窗口正式办理该批人员录用手续。</li>
					<li>2、市社保中心将于10月4日至10月7日处理10月4日前已上传录用、退工信息。由于数据量较大，如10月份结算出现部分员工应录未录、应退未退，请于11日后携带盖有单位公章的花名册材料及电子档至前进西路1801号C座人社服务大厅一楼单位综合窗口补办手续。</li>
					<li>3、省平台上线之初，窗口业务量预计有所增加，为提高效率、避免拥堵，请各用人单位尽量通过网办大厅或错峰办理相关业务。</li>
				</span>
			</div>
		</div>

		<div class="mask">
			<div class="title">昆山市企业职工用工备案临时系统</div>
			<div class="login-content">
				<div class="login-container">
					<h2 class="title">企业登录</h2>
					<div class="login-form" :rules="rules" :hidden="!systemCanUse">
						<el-form ref="form1" :model="form1" :rules="rules">
							<el-form-item label="" prop="nickName" :hidden="true">
								<el-input v-model="form1.nickName" prefix-icon="el-icon-user" placeholder="请输入账号"
									@input="nickNameInput"></el-input>
							</el-form-item>
							<el-form-item label="" prop="password" :hidden="true">
								<el-input v-model="form1.password" :show-password="true" prefix-icon="el-icon-lock"
									 placeholder="请输入密码"></el-input>
							</el-form-item>
							<!-- <el-form-item label="" prop="code" class="item-code" :hidden="true">
								<el-input v-model="form.code" style='width:54%;display:inline-block;vertical-align:top;'
									prefix-icon="el-icon-check" placeholder="请输入验证码" @keyup.enter.native="submit1('form1')">
								</el-input>
								<s-identify style='display:inline-block;height:40px;vertical-align:top;cursor:pointer;'
									:identifyCode="code" :contentHeight='40' @click.native="handleRefreshCode" />
							</el-form-item> -->
							<!-- <el-form-item class="item-mange">
								<a class="manage-btn" @click="changeManage">{{mangeText}}</a>
							</el-form-item> -->
							<!-- <el-form-item label="" :hidden="form.nickName!='guest'">
								<span style="color: red; line-height: 20px; font-size: 20px;">企业登录暂未开放<br>请在9月21日以后进入方可使用</span>
							</el-form-item> -->
							 <!-- :hidden="(form.nickName=='guest')&&!guestCanUse" -->
							<el-form-item label="" class="login-btn">
								<el-button type="primary" :loading="loading1" style="width:100%;"
									@click.native="submit1('form1')" :disabled="!guestCanUse">登录</el-button>
							</el-form-item>
						</el-form>
						<!-- <div class="print-link">
							<br />
							<p>相关下载</p>
							<a href="http://image.szhtj.cn/ArgoxPrintService201209.exe">条码打印机服务</a>
							<a href="http://image.szhtj.cn/EPSON-LQ-630K.zip">EPSON-LQ-630K打印机驱动</a>
						</div> -->
				
					</div>
				</div>
				
				<div class="login-container">
					<h2 class="title">管理员登录</h2>
					<div class="login-form" :rules="rules" :hidden="!systemCanUse">
						<el-form ref="form2" :model="form2" :rules="rules" style="margin-top: 100px;">
							<el-form-item label="" prop="nickName">
								<el-input v-model="form2.nickName" prefix-icon="el-icon-user" placeholder="请输入账号"
									@input="nickNameInput"></el-input>
							</el-form-item>
							<el-form-item label="" prop="password">
								<el-input v-model="form2.password" :show-password="true" prefix-icon="el-icon-lock"
									@keyup.enter.native="submit2('form2')" placeholder="请输入密码"></el-input>
							</el-form-item>
							<el-form-item label="" prop="code" class="item-code">
								<el-input v-model="form.code" style='width:54%;display:inline-block;vertical-align:top;'
									prefix-icon="el-icon-check" placeholder="请输入验证码" @keyup.enter.native="submit2('form2')">
								</el-input>
								<s-identify style='display:inline-block;height:40px;vertical-align:top;cursor:pointer;'
									:identifyCode="code" :contentHeight='40' @click.native="handleRefreshCode" />
							</el-form-item>
							<!-- <el-form-item class="item-mange">
								<a class="manage-btn" @click="changeManage">{{mangeText}}</a>
							</el-form-item> -->
							<!-- <el-form-item label="" :hidden="form.nickName!='guest'">
								<span style="color: red; line-height: 20px; font-size: 20px;">企业登录暂未开放<br>请在9月21日以后进入方可使用</span>
							</el-form-item> -->
							<el-form-item class="login-btn" label="" :hidden="(form2.nickName=='guest')&&!guestCanUse">
								<el-button type="primary" :loading="loading2" style="width:100%;"
									@click.native="submit2('form2')">登录</el-button>
							</el-form-item>
						</el-form>
						<!-- <div class="print-link">
							<br />
							<p>相关下载</p>
							<a href="http://image.szhtj.cn/ArgoxPrintService201209.exe">条码打印机服务</a>
							<a href="http://image.szhtj.cn/EPSON-LQ-630K.zip">EPSON-LQ-630K打印机驱动</a>
						</div> -->
				
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// import md5 from 'md5'
	import SIdentify from './captcha'
	import {
		login
	} from '@/api/sys/login'

	import {
		startTime,
		endTime,
		sysEndTime
	} from '@/common/env.js';

	/*function hasErrors (fieldsError) {
	    return Object.keys(fieldsError).some(field => fieldsError[field])
	}*/
	var interval;
	export default {
		name: 'login',
		components: {
			SIdentify
		},
		data() {
			return {
				loading1: false,
				loading2: false,
				code: '',
				form: {
					code:''
				},
				form1: {
					nickName: 'guest',
					password: '123456',
					// code: ''
				},
				mangeText: '管理员登录',
				form2: {
					nickName: '',
					password: '',
					// code: ''
				},
				rules: {
					nickName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
					// code: [{
					// 	required: true,
					// 	message: '请输入验证码',
					// 	trigger: 'blur'
					// }, ]
				},
				guestCanUse: false,
				systemCanUse: true,

				xPos: 0,
				yPos: 0,
				xin: true,
				yin: true,
				step: 1,
				delay: 18,
				height: 0,
				Hoffset: 0,
				Woffset: 0,
				yon: 0,
				xon: 0,
				pause: true,
				thedivShow: true,
			}
		},
		mounted() {
			interval = setInterval(this.changePos, this.delay);
		},
		created() {
			this.handleRefreshCode()
			const format = 'YYYY/MM/DD HH:mm:ss'

			const start = this.$moment(startTime, format);
			const end = this.$moment(endTime, format);
			const sysEnd = this.$moment(sysEndTime, format);
			// console.log(end)
			// console.log(this.$moment(endTime).diff(this.$moment(), 'days'))
			if ((this.$moment().diff(this.$moment(start), 'days') >= 0) && (this.$moment(end).diff(this.$moment(),
					'seconds') >= 0)) {
				this.guestCanUse = true
			}
			if (this.$moment(sysEnd).diff(this.$moment(), 'seconds') < 0) {
				this.systemCanUse = false
			}
		},
		methods: {
			handleRefreshCode() {
				this.code = (Math.random() * 8999 + 1000).toFixed(0).toString();
			},
			nickNameInput(val) {
				this.mangeText = '企业登录'
			},
			changeManage() {
				if (this.form.nickName == 'guest') {
					this.form = {
						nickName: '',
						password: ''
					}
					this.mangeText = '企业登录'
				} else {
					this.form = {
						nickName: 'guest',
						password: '123456'
					}
					this.mangeText = '管理员登录'
				}
			},
			submit1(name) {
				let that = this;
				// 后端交互时需注释
				// 没有登陆接口时，直接放开登陆，默认以超级管理员登陆
				// var userInfo = {
				// 	nickname: "超级管理员",
				// 	phone:'admin',
				// 	roles: 1,
				// 	token: "eyJhbGciOiJIUzI1NiJ9.eyJqd3Qt",
				// 	"isAuth":false // true开启权限验证模式 ，false 不使用权限验证，默认无权限验证
				// };
				// this.$ls.set('userInfo',userInfo);
				// this.success('登陆成功！');
				// this.$router.push('/');
				// return;


				//========================= 后端交互 ========================
				this.loading1 = true;
				this.$progress.start();
				if (!this.form1.nickName) {
					this.error('请输入用户名!');
					this.loading1 = false;
					this.$progress.done();
					return;
				}
				if (!this.form1.password) {
					this.error('请输入密码!');
					this.loading1 = false;
					this.$progress.done();
					return;
				}
				if (!this.form.code && this.form1.nickName != 'guest') {
					this.error('请输入验证码!');
					this.loading1 = false;
					this.$progress.done();
					return;
				}
				if ((this.form.code !== this.code) && this.form1.nickName != 'guest') {
					this.error('验证码不正确!');
					this.loading1 = false;
					this.$progress.done();
					return;
				}
				this.handleSubmit(login, this.$refs[name], this, data => {
					this.loading1 = false;
					// true开启权限验证模式 ，false 不使用权限验证 ，默认不开启权限
					data.isAuth = true; // 开发时可设置为false，便于快速开发界面
					this.success('登陆成功');
					this.$ls.set("userInfo", data);
					this.$ls.set('isFirstLogin', true);
					console.log(data)
					this.$router.push('/');
					// this.$router.push('/laundry/order');
				}, false, fail => {
					this.error(fail.msg + '，请5秒后再试');
					setTimeout(() => {
						this.handleRefreshCode();
						this.loading1 = false;
						this.$progress.done();
					}, 5000)
				}, error => {
					this.handleRefreshCode();
					this.error('服务异常')
				});
			},
			submit2(name) {
				let that = this;
				// 后端交互时需注释
				// 没有登陆接口时，直接放开登陆，默认以超级管理员登陆
				// var userInfo = {
				// 	nickname: "超级管理员",
				// 	phone:'admin',
				// 	roles: 1,
				// 	token: "eyJhbGciOiJIUzI1NiJ9.eyJqd3Qt",
				// 	"isAuth":false // true开启权限验证模式 ，false 不使用权限验证，默认无权限验证
				// };
				// this.$ls.set('userInfo',userInfo);
				// this.success('登陆成功！');
				// this.$router.push('/');
				// return;
			
			
				//========================= 后端交互 ========================
				this.loading2 = true;
				this.$progress.start();
				if (!this.form2.nickName) {
					this.error('请输入用户名!');
					this.loading2 = false;
					this.$progress.done();
					return;
				}
				if (!this.form2.password) {
					this.error('请输入密码!');
					this.loading2 = false;
					this.$progress.done();
					return;
				}
				if (!this.form.code && this.form2.nickName != 'guest') {
					this.error('请输入验证码!');
					this.loading2 = false;
					this.$progress.done();
					return;
				}
				if ((this.form.code !== this.code) && this.form2.nickName != 'guest') {
					this.error('验证码不正确!');
					this.loading2 = false;
					this.$progress.done();
					return;
				}
				this.handleSubmit(login, this.$refs[name], this, data => {
					this.loading2 = false;
					// true开启权限验证模式 ，false 不使用权限验证 ，默认不开启权限
					data.isAuth = true; // 开发时可设置为false，便于快速开发界面
					this.success('登陆成功');
					this.$ls.set("userInfo", data);
					this.$ls.set('isFirstLogin', true);
					console.log(data)
					this.$router.push('/');
					// this.$router.push('/laundry/order');
				}, false, fail => {
					this.error(fail.msg + '，请5秒后再试');
					setTimeout(() => {
						this.handleRefreshCode();
						this.loading2 = false;
						this.$progress.done();
					}, 5000)
				}, error => {
					this.handleRefreshCode();
					this.error('服务异常')
				});
			},

			changePos() {
				let width = document.documentElement.clientWidth;
				let height = document.documentElement.clientHeight;
				this.Hoffset = this.$refs.thediv.offsetHeight; //获取元素高度
				this.Woffset = this.$refs.thediv.offsetWidth;

				// 滚动部分跟随屏幕滚动
				// this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
				// this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";

				// 滚动部分不随屏幕滚动
				this.$refs.thediv.style.left =
					this.xPos + document.body.scrollLeft + "px";
				this.$refs.thediv.style.top = this.yPos + document.body.scrollTop + "px";

				if (this.yon) {
					this.yPos = this.yPos + this.step;
				} else {
					this.yPos = this.yPos - this.step;
				}
				if (this.yPos < 0) {
					this.yon = 1;
					this.yPos = 0;
				}
				if (this.yPos >= height - this.Hoffset) {
					this.yon = 0;
					this.yPos = height - this.Hoffset;
				}

				if (this.xon) {
					this.xPos = this.xPos + this.step;
				} else {
					this.xPos = this.xPos - this.step;
				}
				if (this.xPos < 0) {
					this.xon = 1;
					this.xPos = 0;
				}
				if (this.xPos >= width - this.Woffset) {
					this.xon = 0;
					this.xPos = width - this.Woffset;
				}
			},
			clearFdAd() {
				clearInterval(interval);
			},
			starFdAd() {
				interval = setInterval(this.changePos, this.delay);
			},
		}
	}
</script>
<style lang="css" scoped>
	.login {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
	}

	.mask {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: rgb(81, 90, 110);
	}
	
	.title{
		color: white;
		font-size: 50px;
		margin-bottom: 60px;
	}
	
	.login-content{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-container {
		/* overflow: hidden; */
		position: relative;
		width: 430px;
		height: 500px;
		max-width: 100%;
		padding-bottom: 16px;
		margin: 0 60px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 6px #cac6c6;
	}
	
	
	
	.login-btn{
		position: absolute;
		bottom: 80px;
		width: 60%;
	}
	
	.login-container .title {
		margin-top: 32px;
		font-size: 26px;
		color: #666;
	}

	.login-container .login-form {
		width: 60%;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.print-link {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.item-code {
		margin-bottom: 0px;
	}

	.item-mange {
		text-align: right;
		margin-bottom: 0px;
	}

	.manage-btn {
		text-decoration: underline;
		cursor: pointer;
	}

	#thediv {
		z-index: 100;
		position: absolute;
		top: 43px;
		left: 2px;
		/* height: 184px; */
		width: 600px;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.ad {
		/* width: 268px; */
		height: auto;
		background: #5CACEE;
		border-radius: 6px;
		/* border: 6px solid #ffaaff; */
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ad-title {
		font-size: 20px;
		font-weight: bold;
	}

	.ad-content {
		padding-top: 6px;
		font-size: 16px;
		text-align: left;
	}

	li {
		list-style: none;
	}
</style>
